<template>
  <view class="bg">
    <view class="main">
      <view
        class="box"
        v-for="(item, index) in list"
        :key="index"
        @tap="jumpPage(item)"
      >
        <view
          class="tag-e"
          v-if="item.open_type != '0' && type == 3"
          :class="item.open_type"
        >
          到点退款
        </view>
        <img :src="item.cover_image" alt="" class="img" />
        <!-- 限时首抽 -->
       <!-- <view class="first_chou">
          <img
            :src="
              $IMG_URL +
              '/uploads/20230609/3321e049787affd3f7ed4257e8525e54.png'
            "
            mode="heightFix"
          />
          <view class="right">
            <view class="text_end">距离结束</view>
            <u-count-down
              :timestamp="timestamp"
              separator-color="#FC502B"
              bg-color="#FC502B"
              color="#fff"
              separator-size="24"
              font-size="24"
            ></u-count-down>
          </view>
        </view> -->
        <view class="text">{{ item.title }}</view>
        <view class="price">
          <view class="new_price">
            <view class="bq">￥</view>
            <view class="jiage">{{ item.single_price }}</view>
            <!-- <view class="first">首抽价</view> -->
          </view>
          <text class="old_price">￥{{ item.original_price }}</text>
        </view>
        <view class="xiaoliang">月销{{ item.sale_total }}笔</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: 'thingsList',
  components: {},
  data() {
    return {
      tagClass: {
        open: 'open',
        refund: '',
      },

      type: '',
      // 页码
      page: 1,
      // 行数
      rows: 10,
      //记录列表
      list: [],
      // 加载中
      loading: false,
      //完成 到底
      finished: false,
      timestamp: 999,
    };
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   */
  //监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
  //onInit() {},
  /** 监听页面加载
   * 其参数为上个页面传递的数据，
   * 参数类型为 Object（用于页面传参）
   */
  onLoad(e) {
    this.init(e);
  },
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {},
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    init(e) {
      switch (e.type) {
        case 'yfs':
          this.type = 1;
          uni.setNavigationBarTitle({
            title: '一番赏',
          });
          break;
        case 'luckybag':
          this.type = 2;
          uni.setNavigationBarTitle({
            title: '福袋',
          });
          break;
        case 'full_open':
          this.type = 3;
          uni.setNavigationBarTitle({
            title: '爱玩满开',
          });
          break;
      }
      this.getData({});
    },

    jumpPage(e) {
      switch (this.type) {
        case 1:
          // uni.navigateTo({
          //   url: `/pages/rewardGoods/portrait/index?id=${e.id}`,
          // });
          this.$Router.replace({
            path: '/pages/rewardGoods/loading',
            query: {
              from: 'list',
              to: 'yfs',
              id: e.id,
            },
          });
          break;
        case 2:
          // uni.navigateTo({
          //   url: `/pages/fukubukuro/extract/extract?id=${e.id}`,
          // });
          this.$Router.replace({
            path: '/pages/rewardGoods/loading',
            query: {
              from: 'list',
              to: 'luckybag',
              id: e.id,
            },
          });
          break;
        case 3:
          // uni.navigateTo({
          //   url: `/pages/fullopen/fullopen?id=${e.id}`,
          // });
          this.$Router.replace({
            path: '/pages/rewardGoods/loading',
            query: {
              from: 'list',
              to: 'full_open',
              id: e.id,
            },
          });
          break;
      }
    },
    getData(ev = {}) {
      let { status = 'init' } = ev;

      if (status === 'init') {
        this.page = 1;
        this.rows = 10;
      }
      this.$http(
        'v1.activitysList',
        {
          page: this.page,
          rows: this.rows,
          text: '',
          activity_type: this.type,
          tag: '0',
        },
        '加载中'
      ).then((res) => {
        if (res.code === 1) {
          switch (status) {
            case 'init':
              this.list = res.data.list;
              break;
            case 'pull':
              this.list.push(...res.data.list);
              break;
          }
          if (res.data.list.length < this.rows) {
            this.finished = true;
          }
        }
      });
    },
  },
  /** ---------- */
  // 监听窗口尺寸变化 App、微信小程序、快手小程序
  //onResize() {},
  // 监听用户下拉动作，一般用于下拉刷新
  //onPullDownRefresh() {},
  // 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
  onReachBottom() {
    if (this.finished) return;
    this.page = Number(this.page) + 1;
    this.getData({
      status: 'pull',
    });
  },
  //点击 tab 时触发，参数为Object 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
  //onTabItemTap() {},
  //用户点击右上角分享 微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
  //onShareAppMessage() {},
  //监听页面滚动 nvue暂不支持
  //onPageScroll() {},
  //监听原生标题栏按钮点击事件 App、H5
  //onNavigationBarButtonTap() {},
  /** 监听页面返回
   * 返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键
   * navigateBack表示来源是 uni.navigateBack ；
   * 支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
   * app、H5、支付宝小程序
   */
  //onBackPress() {},
  // 监听原生标题栏搜索输入框输入内容变化事件 App、H5
  //onNavigationBarSearchInputChanged() {},
  // 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。App、H5
  //onNavigationBarSearchInputConfirmed() {},
  // 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）App、H5
  //onNavigationBarSearchInputClicked() {},
  // 监听用户点击右上角转发到朋友圈 微信小程序
  //onShareTimeline() {},
  // 监听用户点击右上角收藏 微信小程序、QQ小程序
  //onAddToFavorites() {},
};
</script>
<style lang="scss" scoped>
.bg {
  min-height: 100%;
  background-color: #e4ddee;
  .main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #e4ddee;
    width: 100%;
    padding-left: 20rpx;
    padding-right: 20rpx;
    padding-bottom: 20rpx;
    .box {
      position: relative;
      padding-bottom: 14rpx;
      width: 349rpx;
      min-height: 300rpx;
      max-height: 512rpx;
      display: flex;
      flex-direction: column;
      margin-top: 15rpx;
      background: #fff;
      border-radius: 20rpx;
      .img {
        border-radius: 20rpx 20rpx 0 0;
        width: 349rpx;
        height: 324rpx;
      }
      .first_chou {
        position: absolute;
        top: 274rpx;
        left: 0;
        width: 100%;
        height: 50rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5rpx;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.35);
        backdrop-filter: blur(2px);
        img {
          height: 42rpx;
          margin-left: 6rpx;
        }
        .right {
          height: 50rpx;
          display: flex;
          align-items: center;
          /deep/ u-count-down {
            line-height: 1;
          }
          .text_end {
            display: inline-block;
            font-size: 16rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #030021;
            margin-right: 10rpx;
          }
        }
      }
      .text {
        width: 309rpx;
        font-size: 28rpx;
        margin-left: 14rpx;
        margin-top: 20rpx;
        color: #000;
        word-break: break-all; /*属性规定自动换行的处理方法。normal(使用浏览器默认的换行规则。),break-all(允许在单词内换行。),keep-all(只能在半角空格或连字符处换行。)*/
        text-overflow: ellipsis;
        display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 1; /** 显示的行数 **/
        overflow: hidden; /** 隐藏超出的内容 **/
        min-height: 30rpx;
        max-height: 60rpx;
        line-height: 30rpx;
        font-family: PingFang SC-Heavy, PingFang SC;
        font-weight: 800;
      }
      .price {
        margin-top: 10rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 14rpx;
        margin-right: 14rpx;
        .new_price {
          .bq {
            display: inline;
            font-size: 24rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #fc3d18;
          }
          .jiage {
            color: #fc3d18;
            display: inline;
            font-size: 35rpx;
            font-family: DIN-Bold;
            font-weight: bold;
          }
          .first {
            font-size: 22rpx;
            color: #fc3d18;
            display: inline;
            font-family: Bahnschrift-Bold, Bahnschrift;
            font-weight: bold;
            margin-left: 2rpx;
          }
        }
        .old_price {
          text-decoration: line-through;
          font-size: 24rpx;
          font-family: DIN-Light;
          font-weight: bold;
          color: #8f8f8f;
        }
      }
      .xiaoliang {
        font-size: 20rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #8f8f8f;
        margin-top: 10rpx;
        margin-left: 16rpx;
      }
    }
  }
}

.tag-e {
  position: absolute;
  top: -5rpx;
  right: -5rpx;
  width: 112rpx;
  height: 36rpx;
  border-radius: 4rpx 27rpx 4rpx 27rpx;
  color: #fff;
  text-align: center;
  line-height: 36rpx;
  font-size: 20rpx;
  background-color: #eee;
  z-index: 10;
  &.refund {
    background-image: linear-gradient(
      90deg,
      rgba(27, 229, 95, 1),
      rgba(0, 176, 242, 1)
    );
  }
  &.open {
    background-image: linear-gradient(
      90deg,
      rgba(229, 27, 148, 1),
      rgba(242, 129, 0, 1)
    );
  }
}
</style>
